import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_smart_dialog/flutter_smart_dialog.dart';
import 'package:get/get.dart';
import 'package:lx_widgets_library/button/button_color.dart';
import 'package:lx_widgets_library/button/button_type.dart';
import 'package:lx_widgets_library/custom_view/border_radius_view.dart';
import 'package:lx_widgets_library/custom_view/equal_parts_horizontal.dart';
import 'package:lx_widgets_library/custom_view/equal_parts_vertical.dart';
import 'package:lx_widgets_library/lx_widgets_library.dart';
import 'package:lx_widgets_library/sheet/bottom_sheet.dart';

void main() {
  Get.lazyPut(() => LxWidgetsLibraryService());
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPageView(),
      builder: FlutterSmartDialog.init(),
    );
  }
}

class MainPageView extends BaseGetView {
  MainPageView({super.key});

  @override
  String? get title => "组件库";

  @override
  bool? get hidenBack => true;

  @override
  Widget buildBody(BuildContext context) {
    // 初始化ScreenUtil
    ScreenUtil.init(
      context,
      designSize: const Size(375, 812),
      minTextAdapt: true,
    );
    return _buildBody(context);
  }

  _buildBody(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(8),
      width: double.infinity,
      height: double.infinity,
      color: GrayColor.gray1,
      child: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _wrapWights(
              [
                LxSegment(
                  segments: [
                    SegmentModel()..title = "新闻",
                    SegmentModel()..title = "丑闻",
                    SegmentModel()..title = "旧闻"
                  ].obs,
                ),
              ],
            ),
            _wrapWights(
              [
                LxButton(
                  title: "LxBottomSheet",
                  buttonTypeEnum: ButtonTypeEnum.base,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                  buttonAlignmentEnum: ButtonAlignmentEnum.block,
                  onTap: () {
                    LxBottomSheet.show(
                      context,
                      title: "LxBottomSheet",
                      dataArr: ["1", "2", "3"],
                    );
                  },
                ),
              ],
            ),
            _wrapWights(
              [
                LxButton(
                  title: "LxToast",
                  buttonTypeEnum: ButtonTypeEnum.base,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                  onTap: () {
                    LxToast.show("系");
                  },
                ),
                LxButton(
                  title: "LxToast 自定义圆角",
                  buttonTypeEnum: ButtonTypeEnum.base,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                  onTap: () {
                    LxToast.show("L", radius: 4);
                  },
                ),
              ],
            ),
            _wrapWights(
              [
                LxButton(
                  title: "LxAlert 不带取消",
                  buttonTypeEnum: ButtonTypeEnum.base,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                  icons: const ['assets/add.png', 'assets/arrow.png'],
                  buttonAlignmentEnum: ButtonAlignmentEnum.block,
                  onTap: () {
                    LxAlert.show("LxAlertLxAlertLxAlert", showCancel: false);
                  },
                ),
                LxButton(
                  title: "LxAlert 带标题带取消",
                  buttonTypeEnum: ButtonTypeEnum.base,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                  buttonAlignmentEnum: ButtonAlignmentEnum.block,
                  icons: const ['assets/add.png', 'assets/arrow.png'],
                  onTap: () {
                    LxAlert.show("LxAlertLxAlertLxAlertLx123456789122222",
                        title: "提示");
                  },
                ),
                LxButton(
                  title: "带副文本",
                  buttonTypeEnum: ButtonTypeEnum.outline,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                  buttonAlignmentEnum: ButtonAlignmentEnum.block,
                  icons: const ['assets/add.png'],
                  onTap: () {
                    LxAlert.show(
                      "LxAlertLxAlertLxAlertLx123456789122222",
                      subContent: "备注",
                    );
                  },
                ),
                LxButton(
                  title: "带标题带副文本",
                  buttonTypeEnum: ButtonTypeEnum.text,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                  buttonAlignmentEnum: ButtonAlignmentEnum.block,
                  icons: const ['assets/arrow.png'],
                  iconOnLeft: false,
                  onTap: () {
                    LxAlert.show(
                      "LxAlertLxAlertLxAlertLx123456789122222",
                      title: "提示",
                      subContent: "备注",
                    );
                  },
                ),
              ],
            ),
            _wrapWights(
              [
                LxButton(
                  title: "带标题带副文本 竖向排列",
                  buttonTypeEnum: ButtonTypeEnum.base,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                  buttonAlignmentEnum: ButtonAlignmentEnum.block,
                  icons: const ['assets/add.png', 'assets/arrow.png'],
                  onTap: () {
                    LxAlert.show(
                      "LxAlertLxAlertLxAlertLx123456789122222",
                      title: "提示",
                      subContent: "备注",
                      actionsAlignment: LxAlertActionsAlignment.column,
                    );
                  },
                ),
                LxButton(
                  title: "带提示 + 扩展组件",
                  buttonTypeEnum: ButtonTypeEnum.outline,
                  buttonSizeEnum: ButtonSizeEnum.medium,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                  icons: const ['assets/arrow.png'],
                  iconOnLeft: false,
                  onTap: () {
                    LxAlert.show(
                      "",
                      title: "提示",
                      extendWidget: Expanded(
                        child: Container(
                          height: 60,
                          color: Colors.amber,
                        ),
                      ),
                    );
                  },
                ),
                LxButton(
                  title: "带 扩展组件",
                  buttonTypeEnum: ButtonTypeEnum.text,
                  buttonSizeEnum: ButtonSizeEnum.small,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                  icons: const ['assets/arrow.png'],
                  iconOnLeft: false,
                  onTap: () {
                    LxAlert.show(
                      "",
                      extendWidget: Expanded(
                        child: Padding(
                          padding: EdgeInsets.only(top: CONTENT_MARGIN),
                          child: Container(
                            height: 60,
                            color: Colors.amber,
                          ),
                        ),
                      ),
                    );
                  },
                ),
              ],
            ),
            _wrapWights(
              [
                LxButton(
                  title: "带 input",
                  buttonTypeEnum: ButtonTypeEnum.base,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                  buttonAlignmentEnum: ButtonAlignmentEnum.block,
                  buttonTypeCustomColor:
                      DeleteButtonTypeColor(isDisable: false),
                  icons: const ['assets/add.png', 'assets/arrow.png'],
                  onTap: () {
                    LxAlert.show(
                      "LxAlertLxAlertLxAlertLx123456789122222",
                      title: "提示",
                      subContent: "备注",
                      textFieldPlaceholder: "请输入",
                      textFieldValue: "123",
                    );
                  },
                ),
                LxButton(
                  title: "Large 文本",
                  buttonTypeEnum: ButtonTypeEnum.base,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                  buttonAlignmentEnum: ButtonAlignmentEnum.block,
                  buttonTypeCustomColor: DeleteButtonTypeColor(
                    isDisable: false,
                    containBorder: false,
                  ),
                  icons: const ['assets/add.png', 'assets/arrow.png'],
                ),
                LxButton(
                  title: "Large 文本",
                  buttonTypeEnum: ButtonTypeEnum.outline,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                  buttonAlignmentEnum: ButtonAlignmentEnum.block,
                  buttonTypeCustomColor: DeleteButtonTypeColor(
                    isDisable: false,
                    containBorder: false,
                  ),
                  icons: const ['assets/add.png', 'assets/arrow.png'],
                ),
                const LxButton(
                  title: "Large 文本11",
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                  buttonAlignmentEnum: ButtonAlignmentEnum.block,
                  buttonStausEnum: ButtonStausEnum.disable,
                  icons: ['assets/add.png', 'assets/arrow.png'],
                ),
              ],
            ),
            _wrapWights(
              [
                const LxButton(
                  title: "Large 填充",
                  buttonSizeEnum: ButtonSizeEnum.large,
                ),
                const LxButton(
                  title: "Mediu 填充",
                  buttonSizeEnum: ButtonSizeEnum.medium,
                  buttonStausEnum: ButtonStausEnum.disable,
                ),
                const LxButton(
                  title: "Small 填充",
                  buttonSizeEnum: ButtonSizeEnum.small,
                ),
              ],
            ),
            _wrapWights(
              [
                const LxButton(
                  title: "Large 填充",
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                ),
                const LxButton(
                  title: "Mediu 填充",
                  buttonSizeEnum: ButtonSizeEnum.medium,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                  buttonStausEnum: ButtonStausEnum.disable,
                ),
                const LxButton(
                  title: "Small 填充",
                  buttonSizeEnum: ButtonSizeEnum.small,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                ),
              ],
            ),
            _wrapWights(
              [
                const LxButton(
                  title: "Large 边框",
                  buttonTypeEnum: ButtonTypeEnum.outline,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                ),
                const LxButton(
                  title: "Mediu 边框",
                  buttonTypeEnum: ButtonTypeEnum.outline,
                  buttonSizeEnum: ButtonSizeEnum.medium,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                  buttonStausEnum: ButtonStausEnum.disable,
                ),
                const LxButton(
                  title: "Small 边框",
                  buttonTypeEnum: ButtonTypeEnum.outline,
                  buttonSizeEnum: ButtonSizeEnum.small,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                ),
              ],
            ),
            _wrapWights(
              [
                const LxButton(
                  title: "Large 边框",
                  buttonTypeEnum: ButtonTypeEnum.outline,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                ),
                const LxButton(
                  title: "Mediu 边框",
                  buttonTypeEnum: ButtonTypeEnum.outline,
                  buttonSizeEnum: ButtonSizeEnum.medium,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                  buttonStausEnum: ButtonStausEnum.disable,
                ),
                const LxButton(
                  title: "Small 边框",
                  buttonTypeEnum: ButtonTypeEnum.outline,
                  buttonSizeEnum: ButtonSizeEnum.small,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                ),
              ],
            ),
            _wrapWights(
              [
                const LxButton(
                  title: "Large 文本",
                  buttonTypeEnum: ButtonTypeEnum.text,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                ),
                const LxButton(
                  title: "Mediu 文本",
                  buttonTypeEnum: ButtonTypeEnum.text,
                  buttonSizeEnum: ButtonSizeEnum.medium,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                  buttonStausEnum: ButtonStausEnum.disable,
                ),
                const LxButton(
                  title: "Small 文本",
                  buttonTypeEnum: ButtonTypeEnum.text,
                  buttonSizeEnum: ButtonSizeEnum.small,
                  buttonWeightEnum: ButtonWeightEnum.primary,
                ),
              ],
            ),
            _wrapWights(
              [
                const LxButton(
                  title: "Large 文本",
                  buttonTypeEnum: ButtonTypeEnum.text,
                  buttonSizeEnum: ButtonSizeEnum.large,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                ),
                const LxButton(
                  title: "Mediu 文本",
                  buttonTypeEnum: ButtonTypeEnum.text,
                  buttonSizeEnum: ButtonSizeEnum.medium,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                  buttonStausEnum: ButtonStausEnum.disable,
                ),
                const LxButton(
                  title: "Small 文本",
                  buttonTypeEnum: ButtonTypeEnum.text,
                  buttonSizeEnum: ButtonSizeEnum.small,
                  buttonWeightEnum: ButtonWeightEnum.defaulT,
                ),
              ],
            ),
            _wrapWights(
              [
                SizedBox(
                  height: 100,
                  child: EqualPartsVertical(
                    [
                      Container(
                        color: Colors.red,
                      ),
                      Container(
                        color: Colors.yellow,
                      ),
                      Container(
                        color: Colors.blue,
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: 100,
                  child: EqualPartsHorizontal(
                    [
                      Container(
                        color: Colors.green,
                      ),
                      Container(
                        color: Colors.yellow,
                      ),
                      Container(
                        color: Colors.blue,
                      ),
                      Container(
                        color: Colors.red,
                      ),
                    ],
                  ),
                ),
                const LxBorderRadiusView(
                  Size(88, 88),
                  radius: 10,
                ),
              ],
            )
          ],
        ),
      ),
    );
  }

  _wrapWights(List<Widget> widgetList) {
    return Column(
      children: [
        const SizedBox(height: 10),
        Wrap(
          spacing: 8,
          runSpacing: 4,
          alignment: WrapAlignment.start,
          children: widgetList,
        ),
      ],
    );
  }
}

class DeleteButtonTypeColor extends ButtonTypeColor {
  // 是否禁用
  bool isDisable;
  // 是否有边框
  bool containBorder;
  DeleteButtonTypeColor({this.isDisable = false, this.containBorder = false});

  @override
  Color get backgroundColor => isDisable ? RedColor.red3 : RedColor.red6;

  @override
  Color get borderColor => containBorder ? backgroundColor : Colors.transparent;

  @override
  Color get clickColor => isDisable ? Colors.transparent : RedColor.red7;

  @override
  Color get textColor => isDisable ? WhiteColor.white4 : WhiteColor.white1;
}
